import {
  Button,
  Modal,
  Icon,
  Link,
  TextField,
  Select,
  Checkbox,
} from "@shopify/polaris";
import { InfoMinor, MobileCancelMajor } from "@shopify/polaris-icons";
import { useState, useCallback } from "react";

import styled from "./index.module.less";

interface Props {
  active: boolean;
  setActive: (value: boolean) => void;
}
function ModalExample({ active, setActive }: Props) {
  const [Modals, setModals] = useState(1);

  const handleChange = useCallback(() => setActive(!active), [active]);

  const [show, setShow] = useState(true);

  const [valueSJR, setValueSJR] = useState(
    "bernadette.lapresse@jadedpixel.com"
  );

  const handleChangeSJR = useCallback(
    (newValue: string) => setValueSJR(newValue),
    []
  );
  //发件人
  const [selectedFJR, setSelectedFJR] = useState(
    '"eriodesign" <erio.design@gmail.com>'
  );

  const handleSelectChangeFJR = useCallback(
    (value: string) => setSelectedFJR(value),
    []
  );

  const optionsFJR = [
    {
      label: '"eriodesign" <erio.design@gmail.com>',
      value: '"eriodesign" <erio.design@gmail.com>',
    },
    {
      label: '"sheneriodesign" <erio.design@gmail.com>',
      value: '"sheneriodesign" <erio.design@gmail.com>',
    },
  ];
  //密件抄送至
  const [checkedMJCSZ, setCheckedMJCSZ] = useState(false);
  const handleChangeMJCSZ = useCallback(
    (newChecked: boolean) => setCheckedMJCSZ(newChecked),
    []
  );
  //主题
  const [valueZT, setValueZT] = useState("Customer account activation");

  const handleChangeZT = useCallback(
    (newValue: string) => setValueZT(newValue),
    []
  );
  //自定义消息
  const [valueZDYXX, setValueZDYXX] = useState("");

  const handleChangeZDYXX = useCallback(
    (newValue: string) => setValueZDYXX(newValue),
    []
  );
  return (
    <div style={{ height: "500px" }}>
      {Modals == 1 && (
        <Modal open={active} onClose={handleChange} title="发送账户邀请">
          {show && (
            <Modal.Section>
              <div className={styled.topblue}>
                <div className={styled.topblueL}>
                  <div className={styled.color}>
                    <Icon source={InfoMinor} color="primary"></Icon>
                  </div>
                  <div className={styled.FONT13}>
                    <div>
                      账户邀请适用于经典客户账户。使用新客户账户时，客户无需创建或激活账户。
                    </div>
                    <div className={styled.color2}>
                      <Button plain monochrome>
                        了解详细信息
                      </Button>
                    </div>
                  </div>
                </div>
                <div
                  className={styled.laitop}
                  onClick={() => {
                    setShow(false);
                  }}
                >
                  <Button
                    icon={MobileCancelMajor}
                    monochrome
                    size="slim"
                    plain
                  ></Button>
                </div>
              </div>
            </Modal.Section>
          )}
          <Modal.Section>
            <div style={{ display: "flex", justifyContent: "space-between" }}>
              <div style={{ width: "280px" }}>
                <TextField
                  label="收件人"
                  type="email"
                  value={valueSJR}
                  onChange={handleChangeSJR}
                  autoComplete="email"
                  disabled
                />
              </div>
              <div style={{ width: "280px" }}>
                <Select
                  label="发件人"
                  options={optionsFJR}
                  onChange={handleSelectChangeFJR}
                  value={selectedFJR}
                />
              </div>
            </div>
            <div style={{ marginTop: "8px" }}>
              <div>密件抄送至:</div>
              <div>
                <Checkbox
                  label="erio.design@gmail.com"
                  checked={checkedMJCSZ}
                  onChange={handleChangeMJCSZ}
                />
              </div>
            </div>
            <div>
              <TextField
                label="主题"
                value={valueZT}
                onChange={handleChangeZT}
                autoComplete="off"
              />
            </div>
            <div>
              <TextField
                label="自定义消息(可选)"
                value={valueZDYXX}
                onChange={handleChangeZDYXX}
                multiline={3}
                autoComplete="off"
              />
            </div>
            <div style={{ color: "#616161" }}>
              可在{" "}
              <Button monochrome plain>
                通知
              </Button>{" "}
              中编辑此模板
            </div>
          </Modal.Section>
          <Modal.Section>
            <div
              style={{
                display: "flex",
                justifyContent: "end",
                alignItems: "center",
              }}
            >
              <div style={{ marginRight: "10px" }}>
                <Button
                  size="slim"
                  onClick={() => {
                    setActive(false);
                    setModals(1);
                  }}
                >
                  取消
                </Button>
              </div>
              <div>
                <Button
                  size="slim"
                  primary
                  onClick={() => {
                    setModals(2);
                  }}
                >
                  预览电子邮件
                </Button>
              </div>
            </div>
          </Modal.Section>
        </Modal>
      )}
      {Modals == 2 && (
        <Modal open={active} onClose={handleChange} title="发送账户邀请">
          {show && (
            <Modal.Section>
              <div className={styled.topblue}>
                <div className={styled.topblueL}>
                  <div className={styled.color}>
                    <Icon source={InfoMinor} color="primary"></Icon>
                  </div>
                  <div className={styled.FONT13}>
                    <div>
                      账户邀请适用于经典客户账户。使用新客户账户时，客户无需创建或激活账户。
                    </div>
                    <div className={styled.color2}>
                      <Button plain monochrome>
                        了解详细信息
                      </Button>
                    </div>
                  </div>
                </div>
                <div
                  className={styled.laitop}
                  onClick={() => {
                    setShow(false);
                  }}
                >
                  <Button
                    icon={MobileCancelMajor}
                    monochrome
                    size="slim"
                    plain
                  ></Button>
                </div>
              </div>
            </Modal.Section>
          )}
          <Modal.Section>
            <div>
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  borderBottom: "1px solid #ccc",
                  padding: "10px 0 ",
                }}
              >
                <div
                  style={{
                    fontWeight: "600",
                    fontSize: "13px",
                    width: "130px",
                  }}
                >
                  发件人:
                </div>
                <div>{selectedFJR}</div>
              </div>
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  borderBottom: "1px solid #ccc",
                  padding: "10px 0 ",
                }}
              >
                <div
                  style={{
                    fontWeight: "600",
                    fontSize: "13px",
                    width: "130px",
                  }}
                >
                  收件人:
                </div>
                <div>{valueSJR}</div>
              </div>
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  borderBottom: "1px solid #ccc",
                  padding: "10px 0 ",
                }}
              >
                <div
                  style={{
                    fontWeight: "600",
                    fontSize: "13px",
                    width: "130px",
                  }}
                >
                  主题:
                </div>
                <div>{valueZT}</div>
              </div>
            </div>
            <div style={{ marginTop: "10px" }}>
              <div
                style={{
                  fontSize: "14px",
                  fontWeight: "600",
                  marginBottom: "8px",
                }}
              >
                电子邮件预览
              </div>
              <div
                style={{
                  width: "100%",
                  padding: "12px",
                  height: "320px",
                  boxSizing: "border-box",
                  overflowY: "scroll",
                  border: "1px solid #ccc",
                  borderRadius: "5px",
                }}
              >
                <div
                  style={{
                    fontSize: "30px",
                    marginTop: "35px",
                  }}
                >
                  eriodesign
                </div>
                <div
                  style={{
                    fontSize: "24px",
                    marginTop: "25px",
                  }}
                >
                  Activate your account
                </div>
                <p
                  style={{
                    fontSize: "16px",
                    color: "#777777",
                    marginTop: "25px",
                  }}
                >
                  Hi, you've created a new customer account at{" "}
                  <span style={{ color: "#1990C6" }}>eriodesign</span>. All you
                  have to do is activate it.
                </p>
                <div
                  style={{
                    width: "100%",
                    backgroundColor: "#1990c6",
                    color: "#fff",
                    fontSize: "16px",
                    height: "61px",
                    lineHeight: "61px",
                    textAlign: "center",
                    borderRadius: "5px",
                    marginTop: "25px",
                  }}
                >
                  Activate your account
                </div>
                <div
                  style={{
                    width: "100%",
                    marginTop: "25px",
                    textAlign: "center",
                    paddingBottom: "15px",
                    borderBottom: "1px solid #ccc",
                  }}
                >
                  or{" "}
                  <span
                    style={{
                      color: "#1990C6",
                      fontSize: "16px",
                    }}
                  >
                    Visit our store
                  </span>
                </div>
                <div
                  style={{
                    margin: "25px 0",
                    fontSize: "13px",
                    textAlign: "center",
                    width: "100%",
                    color: "#999999",
                  }}
                >
                  If you have any questions, reply to this email or contact us
                  at
                  <span
                    style={{
                      color: "#1990C6",
                    }}
                  >
                    erio.design@gmail.com
                  </span>
                </div>
              </div>
            </div>
          </Modal.Section>
          <Modal.Section>
            <div
              style={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
              }}
            >
              <div>
                <Button
                  size="slim"
                  onClick={() => {
                    setModals(1);
                  }}
                >
                  返回
                </Button>
              </div>
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                }}
              >
                <div style={{ marginRight: "10px" }}>
                  <Button
                    size="slim"
                    onClick={() => {
                      setActive(false);
                      setModals(1);
                    }}
                  >
                    取消
                  </Button>
                </div>
                <div>
                  <Button
                    size="slim"
                    primary
                    onClick={() => {
                      // setModals(2);
                    }}
                  >
                    发送电子邮件
                  </Button>
                </div>
              </div>
            </div>
          </Modal.Section>
        </Modal>
      )}
    </div>
  );
}

export default ModalExample;
